<script setup>
import { ref } from 'vue'
const formRef = ref(null)
const props = defineProps({
  // 表单数据
  data: {
    type: Object,
    default: {}
  },
  formOpt: {
    type: Array,
    default: []
  }
})
const formData = ref(Object.assign({}, props.data))
const emits = defineEmits(['handleForm'])
// 表单验证规则
const rules = {
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 8, message: '长度至少4位,最多8位', trigger: ['change', 'blur'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码必须大于6个字符', trigger: ['change', 'blur'] }
  ],
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value != formData.value.password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: ['change']
    },
    { required: true, message: '请确认密码', trigger: 'blur' }
  ],
  identity: [{ required: true, message: '请输入身份', trigger: ['change', 'blur'] }],
  studentNumber: [{ required: true, message: '请输入学号', trigger: ['change', 'blur'] }],
  name: [{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }],
  gender: [{ required: true, message: '请选择性别', trigger: ['change', 'blur'] }],
  college: [{ required: true, message: '请选择学院', trigger: ['change', 'blur'] }],
  major: [{ required: true, message: '请选择专业', trigger: ['change', 'blur'] }],
  phone: [{ required: true, message: '请输入联系电话', trigger: ['change', 'blur'] }],
  grade: [{ required: true, message: '请选择年级', trigger: ['change', 'blur'] }],
  class: [{ required: true, message: '请輸入班级', trigger: ['change', 'blur'] }],
  teacherNumber: [{ required: true, message: '请輸入教师工号', trigger: ['change', 'blur'] }],

  idCard: [{ required: true, message: '请輸入身份证号', trigger: ['change', 'blur'] }],
  enterpriseName: [{ required: true, message: '请输入企业名称', trigger: ['change', 'blur'] }],
  enterpriseAddress: [{ required: true, message: '请输入企业地址', trigger: ['change', 'blur'] }],
  enterprisePhone: [{ required: true, message: '请输入企业练习电话', trigger: ['change', 'blur'] }],
  industry: [{ required: true, message: '请选择企业所属行业', trigger: ['change', 'blur'] }],
  detail: [{ required: true, message: '请输入企业详情', trigger: ['change', 'blur'] }]
}
function handleForm(type) {
  formRef.value.validate((valid) => {
    if (valid) {
      emits('handleForm', type, formData.value)
    } else {
      return false
    }
  })
}
</script>

<template>
  <div class="form-wrapper">
    <el-form
      :model="formData"
      :inline="true"
      :rules="rules"
      ref="formRef"
      label-width="120px"
      label-position="left"
      label-suffix="："
    >
      <el-form-item
        v-for="(item, index) in props.formOpt"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'input'"
          :disabled="item.prop == 'identity'"
        ></el-input>
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'password'"
          show-password
          type="password"
          style="width: 195px"

        ></el-input>
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'select'"
          placeholder="请选择"
          style="width: 195px"
        >
          <el-option
            v-for="obj in item.options"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <el-button
          style="padding: 0 20px; letter-spacing: 5px"
          :type="item.btnType || 'primary'"
          v-if="item.type == 'button'"
          @click="handleForm(item.prop)"
          >{{ item.name }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.form-wrapper {
  display: flex;
  justify-content: start;
}

:deep() {
  .el-form-item--label-left .el-form-item__label {
    justify-content: flex-end;
  }
  .el-input{
    box-sizing: border-box;
  }
}
</style>
